// 实时监听sass改变去变化css
@use 'sass:math';

.box {
    background: #ccc;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border-radius: 50% 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
}

$r: 85px;
$n: 12;
$step: 360deg / $n;


@for $i from 1 through $n {
    $deg: ($i - 1) * $step;
    $x: $r * math.sin($deg);
    @debug $x;
    $y: $r * math.cos($deg) * -1;
    @debug $y;
    .box .item:nth-child(#{$i}) {
        position: absolute;
        z-index: 1;
        transform: translate($x, $y);
    }
}